<template>
	<view>
		
		<!-- 只有滚动的图片 -->
		<view class="history-section icon">
			<scroll-view scroll-x class="h-list">
				<view class="h-box" v-for="(item,i) in panicBuyingGoods_list" :key="i">
					<image :src="item.goods_thumb_image" mode="aspectFill"></image>
				</view>
			</scroll-view>
		</view>
		
		<!-- 滚动的图片加文案 -->
		<view class="history-section" style="min-height: 200upx;background-color: #FFFFFF;padding-top: 20upx;">
			<scroll-view scroll-x class="h-list">
				<view  class="h-box" v-for="(item,i) in panicBuyingGoods_list" :key="i" style="text-align: center;">
					
					<view>
						<image :src="item.goods_thumb_image" mode="aspectFill"></image>
					</view>
					<view>
						<text>{{item.goods_short}}</text>
					</view>
					<view style="margin-top: 10upx;">
						<text style="font-weight: 555;color: #ff5500;font-size: 30upx;"><text style="">￥</text> {{item.price}}</text>
						<text style="text-decoration: line-through;color: #999;font-size: 22upx;">￥{{item.cost_price}}</text>
					</view>
					
				</view>
			</scroll-view>
		</view>
		
		
		
		
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.setAjax()
		},
		data(){
			return {
				panicBuyingGoods_list: [],
			}
		},
		methods:{
			async setAjax(){
				this.panicBuyingGoods_list = await this.$api.json('panicBuyingGoods_list')
			},
		}
	}
</script>

<style lang="scss">
	
	.history-section{
		padding: 30upx 0 0;
		margin-top: 20upx;
		background: #fff;
		border-radius:10upx;
		.h-list{
			white-space: nowrap;
			padding: 30upx 30upx 0;
			.h-box {
				display:inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				text-align: center;
				font-size: 24upx;
				image{
					display:inline-block;
					width: 160upx;
					height: 160upx;
					border-radius: 10upx;
				}
			}
		}
	}
	
</style>
